<template lang="">
  <div class="main">
    <div class="header">
      <!-- logo -->
      <div class="left-nav">
        <img src="@/assets/images/logo.svg" alt="logo" />
      </div>
      <!-- 导航 -->
      <div class="mid-nav">
        <el-divider direction="vertical"></el-divider>
        <div
          v-for="(item, index) in NavLists"
          :key="index"
          ref="navLists"
          @mouseover="navAction"
        >
          <div class="nav_item" @click="toDetails(item)">{{ item.name }}</div>
        </div>
        <div class="nav_item">
          <el-popover
            placement="top-start"
            width="20"
            trigger="hover"
            transition="zoom-in-bottom"
          >
            <ul class="ul">
              <li
                @click="goMore(item)"
                id="lis"
                style="cursor: pointer; margin: 6px 0"
                @mouseenter="turnRed(item)"
                @mouseout="turnBlack(item)"
                ref="lis"
                v-for="(item, index) in moreList"
                :key="index"
              >
                <i style="margin-right: 5px" class="el-icon-caret-right"></i
                >{{ item.name }}
              </li>
            </ul>
            <div slot="reference">更多</div>
          </el-popover>
        </div>
      </div>

      <!-- 登录与用户信息展示 -->
      <div class="right-nav">
        <div class="user" v-if="userInfo">
            <img :src="userInfo.picture"></img>
            <span class="username" @click="toMyInfo()">{{userInfo.username}}</span>
        </div>
        <div class="user" v-if="!userInfo">
          <el-button @click="toLogin()">登录|注册</el-button>
        </div>
      </div>
    </div>

    <div class="search">
      <div class="search-select">
        <el-input
          placeholder="请输入内容"
          v-model="seatchForm.searchInput"
          class="input-with-select"
        >
          <el-select v-model="seatchForm.searchType" slot="prepend" placeholder="请选择">
            <el-option label="全部" value="all"></el-option>
            <el-option label="二手闲置" value="second-hand"></el-option>
            <el-option label="失物招领" value="lost-found"></el-option>
            <el-option label="资源共享" value="resource-sharing"></el-option>
            <el-option label="论坛" value="forum"></el-option>
            <el-option label="文章" value="article"></el-option>
            <el-option label="作品" value="work"></el-option>
            <el-option label="评论" value="comment"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search">搜索</el-button>
        </el-input>
      </div>
      <div class="search-mid"></div>

      <div class="search-right">
        <div @click="dialogFormVisible = true" style="margin-right: 10px">
          <i class="el-icon-upload"></i>发布
        </div>
        <div @click="toFavorites">
          <i class="el-icon-suitcase-1"></i>我的发布
        </div>
        <div @click="toCheckOut"><i class="el-icon-sell"></i>购物车</div>
      </div>
    </div>

    <div class="message" @click="toMyMessage()">
      我的消息
    </div>
    <el-dialog title="发布信息" :visible.sync="dialogFormVisible">
      <el-tabs v-model="activeName">
        <el-tab-pane label="二手闲置" name="first">
          <el-form :model="idleForm" :rules="rules" ref="idleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="物品名称" prop="itemsName">
            <el-input v-model="idleForm.itemsName"></el-input>
          </el-form-item>
          <el-form-item label="物品描述" prop="itemsDesc">
            <el-input type="textarea" v-model="idleForm.itemsDesc"></el-input>
          </el-form-item>
          <el-form-item label="分类标签" prop="tag">
            <el-select v-model="idleForm.tag" placeholder="请选择">
              <el-option label="数码" value="数码"></el-option>
              <el-option label="服装" value="服装"></el-option>
              <el-option label="书籍" value="书籍"></el-option>
              <el-option label="美妆" value="美妆"></el-option>
              <el-option label="饰品" value="饰品"></el-option>
              <el-option label="箱包" value="箱包"></el-option>
              <el-option label="运动户外" value="运动户外"></el-option>
              <el-option label="电子设备" value="电子设备"></el-option>
              <el-option label="日用百货" value="日用百货"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传图片">
          </el-form-item>
          <el-upload
            action="http://localhost:10010/idle/uploadFile"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            style="margin-left:100px;margin-bottom: 20px;"
            :limit="3"
            :on-exceed="onExceed"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
              </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <el-form-item label="期望价格" prop="expectPrice">
            <el-input v-model="idleForm.expectPrice"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitIdleForm('idleForm')">发布</el-button>
            <el-button @click="resetForm('idleForm')">重置</el-button>
            <el-button @click="colse()">取消</el-button>
          </el-form-item>
        </el-form>
        </el-tab-pane>
        <el-tab-pane label="失物招领" name="second">
          <el-form :model="lostForm" :rules="rules2" ref="lostForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="物品名称" prop="itemsName">
            <el-input v-model="lostForm.itemsName"></el-input>
          </el-form-item>
          <el-form-item label="物品描述" prop="itemsDesc">
            <el-input type="textarea" v-model="lostForm.itemsDesc"></el-input>
          </el-form-item>
          <el-form-item label="分类标签" prop="tag">
            <el-select v-model="lostForm.tag" placeholder="请选择">
              <el-option label="数码" value="数码"></el-option>
              <el-option label="服装" value="服装"></el-option>
              <el-option label="书籍" value="书籍"></el-option>
              <el-option label="饰品" value="饰品"></el-option>
              <el-option label="箱包" value="箱包"></el-option>
              <el-option label="洗浴美妆" value="洗浴美妆"></el-option>
              <el-option label="电子设备" value="电子设备"></el-option>
              <el-option label="日常用品" value="日常用品"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传图片">
          </el-form-item>
          <el-upload
            action="http://localhost:10010/idle/uploadFile"
            list-type="picture-card"
            :on-success="handleAvatarSuccess2"
            style="margin-left:100px;margin-bottom: 20px;"
            :limit="3"
            :on-exceed="onExceed"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
              </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible2">
            <img width="100%" :src="dialogImageUrl2" alt="">
          </el-dialog>
          <el-form-item label="帖子类型" prop="cardType">
            <el-radio-group v-model="lostForm.cardType">
              <el-radio label="寻找失主"></el-radio>
              <el-radio label="丢失物品"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitLostForm('lostForm')">发布</el-button>
            <el-button @click="resetLostForm('lostForm')">重置</el-button>
            <el-button @click="colse()">取消</el-button>
          </el-form-item>
        </el-form>
        </el-tab-pane>
        <el-tab-pane label="资源共享" name="third">
          <el-form :model="resForm" :rules="rules3" ref="resForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="资源描述" prop="resourceDesc">
            <el-input type="textarea" v-model="resForm.resourceDesc"></el-input>
          </el-form-item>
          <el-form-item label="分类标签" prop="tag">
            <el-select v-model="resForm.tag" placeholder="请选择">
              <el-option label="文章" value="文章"></el-option>
              <el-option label="文件" value="文件"></el-option>
              <el-option label="书籍" value="书籍"></el-option>
              <el-option label="论文" value="论文"></el-option>
              <el-option label="APP" value="APP"></el-option>
              <el-option label="视频" value="视频"></el-option>
              <el-option label="软件" value="软件"></el-option>
              <el-option label="平台" value="平台"></el-option>
              <el-option label="求职" value="求职"></el-option>
              <el-option label="路线" value="路线"></el-option>
              <el-option label="创作专栏" value="创作专栏"></el-option>
              <el-option label="交流社区" value="交流社区"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传图片">
          </el-form-item>
          <el-upload
            action="http://localhost:10010/idle/uploadFile"
            list-type="picture-card"
            :on-success="handleAvatarSuccess3"
            style="margin-left:100px;margin-bottom: 20px;"
            :limit="3"
            :on-exceed="onExceed"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
              </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible3">
            <img width="100%" :src="dialogImageUrl3" alt="">
          </el-dialog>
          <el-form-item label="资源链接" prop="recourseLink">
            <el-input v-model="resForm.recourseLink"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitResForm('resForm')">发布</el-button>
            <el-button @click="resetResForm('resForm')">重置</el-button>
            <el-button @click="colse()">取消</el-button>
          </el-form-item>
        </el-form>
        </el-tab-pane>
      </el-tabs>
  </el-dialog>
  </div>
</template>
<script>
import { getUser } from "../../..../../utils/user.js";
import { insert } from "../../..../../utils/idle.js";
import { issueLost } from "../../..../../utils/lost.js";
import { issueRes } from "../../..../../utils/res.js";

export default {
 
  data () {
    return {
      params:{
        userId: '',
        token:''
      },
      userInfo:{},
      dialogFormVisible: false,
      activeName: 'first',
      
      seatchForm: {
        searchInput: "",
        searchType: "all",
      },
      dialogImageUrl: '',
      dialogVisible: false,
      dialogImageUrl2: '',
      dialogVisible2: false,
      dialogImageUrl3: '',
      dialogVisible3: false,
      idleForm: {
        ownId:'',
        itemsName:'',
        itemsDesc:'',
        tag:'',
        expectPrice:'',
        plist:[]
      },
      rules: {
        itemsName: [
          { required: true, message: '请输入物品名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        tag: [
          { required: true, message: '请选择分类标签', trigger: 'change' }
        ],
        itemsDesc: [
          { required: true, message: '请填写物品描述', trigger: 'blur' }
        ],
        expectPrice: [
          { required: true, message: '请填写期望价格', trigger: 'blur' }
        ],
      },
      lostForm: {
        issueId:'',
        itemsName:'',
        itemsDesc:'',
        tag:'',
        cardType:'',
        plist:[]
      },
      rules2: {
        itemsName: [
          { required: true, message: '请输入物品名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        tag: [
          { required: true, message: '请选择分类标签', trigger: 'change' }
        ],
        itemsDesc: [
          { required: true, message: '请填写物品描述', trigger: 'blur' }
        ],
        cardType: [
          { required: true, message: '请选择帖子类型', trigger: 'change' }
        ]
      },
      resForm: {
        issueId:'',
        resourceDesc:'',
        recourseLink:'',
        tag:'',
        plist:[]
      },
      rules3: {
        recourseLink: [
          { required: true, message: '请输入资源链接', trigger: 'blur' },
        ],
        tag: [
          { required: true, message: '请选择分类标签', trigger: 'change' }
        ],
        resourceDesc: [
          { required: true, message: '请填写资源描述', trigger: 'blur' }
        ]
      },

      mode: "default", // or 'simple'

      //路由跳转
      NavLists: [
        {
          id: 1,
          name: "首页",
          pathName: "index",
          children: [],
        },
        {
          id: 2,
          name: "二手闲置",
          pathName: "catalog",
          children: [
            {
              id: 21,
              name: "广场",
            },
            {
              id: 22,
              name: "详情",
            },
          ],
        },
        {
          id: 3,
          name: "失物招领",
          pathName: "news",
          children: [
            {
              id: 31,
              name: "广场",
            },
            {
              id: 32,
              name: "详情",
            },
            {
              id: 33,
              name: "interview",
            },
          ],
        },
        {
          id: 4,
          name: "资源共享",
          pathName: "faq",
          children: [],
        },
      ],
      moreList: [
        {
          id: 1,
          name: "购物车",
          pathName: "checkout",
        },
        {
          id: 2,
          name: "我的收藏",
          pathName: "favorites",
        },
        {
          id: 3,
          name: "个人中心",
          pathName: "profile",
        },
        {
          id: 4,
          name: "忘记密码",
          pathName: "forgetpsw",
        },
        {
          id: 5,
          name: "隐私协议",
          pathName: "privacy",
        },
        {
          id: 6,
          name: "联系我们",
          pathName: "contacts",
        },
        {
          id: 7,
          name: "关于我们",
          pathName: "aboutus",
        },
      ],
      searchList: [
        {
          id: "01",
          name: "全部",
        },
        {
          id: "02",
          name: "二手闲置",
        },
        {
          id: "03",
          name: "失物招领",
        },
        {
          id: "04",
          name: "资源共享",
        },
        {
          id: "05",
          name: "论坛",
        },
        {
          id: "06",
          name: "文章",
        },
        {
          id: "07",
          name: "作品",
        },
        {
          id: "08",
          name: "评论",
        },
      ],
    };
  },
  created() {
      this.params.userId = localStorage.getItem("user");
      this.idleForm.ownId = localStorage.getItem("user");
      this.lostForm.issueId = localStorage.getItem("user");
      this.resForm.issueId = localStorage.getItem("user");
      this.params.token = this.$cookies.get("token");
      this.getUserInfo(); 
  },
  
  methods: {
    // 查询用户信息
    getUserInfo() {
        getUser(this.params).then(res => {
            if (res.data.code == 200) {
                this.userInfo = res.data.data;
            }
        })
    },
    //添加物品图片
    handleAvatarSuccess(res, file) {
      this.idleForm.plist.push(res.data);
    },
     //添加物品图片
     handleAvatarSuccess2(res, file) {
      this.lostForm.plist.push(res.data);
    },
     //添加物品图片
     handleAvatarSuccess3(res, file) {
      this.resForm.plist.push(res.data);
    },
    //超出文件个数限制
    onExceed(files, fileList){
        this.$message.warning("最多上传3张图片！");
    },
    //发布二手闲置
    submitIdleForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
           insert(this.idleForm,this.params).then(res=>{
              if(res.data.code==200){
                 this.$message.success(res.data.msg);
                 this.resetForm('idleForm');
                 this.dialogFormVisible=false;
              }else{
                this.$message.error(res.data.msg);
              }
           })
        } else {
          this.$message.warning("请完善信息！");
        }
      });
    },
    //发布失物招领
    submitLostForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
           issueLost(this.lostForm,this.params).then(res=>{
              if(res.data.code==200){
                 this.$message.success(res.data.msg);
                 this.resetLostForm('lostForm');
                 this.dialogFormVisible=false;
              }else{
                this.$message.error(res.data.msg);
              }
           })
        } else {
          this.$message.warning("请完善信息！");
        }
      });
    },
    //发布资源
    submitResForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
           issueRes(this.resForm,this.params).then(res=>{
              if(res.data.code==200){
                 this.$message.success(res.data.msg);
                 this.resetLostForm('resForm');
                 this.dialogFormVisible=false;
              }else{
                this.$message.error(res.data.msg);
              }
           })
        } else {
          this.$message.warning("请完善信息！");
        }
      });
    },
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //重置表单
    resetLostForm(formName) {
      this.$refs[formName].resetFields();
    },
     //重置表单
     resetResForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 前往个人信息页面
    toMyInfo () {
      this.$router.push({
        name: "myInfo",
      });
    },
     // 前往登录页面
     toLogin () {
      this.$router.push({
        name: "login",
      });
    },
    //取消
    colse(){
      this.dialogFormVisible=false;
    },
   

  
    // 样式方法
    turnRed (val) {
      let li = this.$refs.lis;
      li.forEach((item, index) => {
        while (index === val.id - 1) {
          item.style.color = "red";
          break;
        }
      });
    },
    turnBlack (val) {
      let li = this.$refs.lis;
      li.forEach((item, index) => {
        while (index === val.id - 1) {
          item.style.color = "black";
          break;
        }
      });
    },
    // 路由跳转
    navAction () {
      //   console.log(this.$refs.navLists);
    },
    toDetails (item) {
      const { pathName } = item;
      this.$router.push({
        name: pathName,
      });
    },
    goMore (val) {
      this.$router.push({
        name: val.pathName,
        params: {
          title: val.name,
        },
      });
    },
    toCheckOut () {
      this.$router.push({
        name: "checkout",
      });
    },
    toFavorites () {
      this.$router.push({
        name: "favorites",
      });
    },
    toMyMessage () {
      this.$router.push({
        name: 'message'
      })
    }
  },
};
</script>
<style scoped lang="css" >
@import url("@wangeditor/editor/dist/css/style.css");
@import url("@/assets/less/header.css");

</style>
